<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业样式.css">
</head>
<body>
    <div class="box">
        <div class="son">
            <h2>添加数据</h2>
            <input type="text" class="yhm" placeholder="用户名"><br>
            <input type="text" class="nl" placeholder="年龄"><br>
            <button onclick="add()" class="a1">确定</button>
            <button onclick="close1()">关闭</button>
        </div>
        <p style="margin-left: 250px;"><button onclick="show()">添加</button><input type="text" placeholder="请输入要搜索的名字"><button>搜索</button></p>
        <table border="1">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
<script>
    //获取页面数据
    var yhm=document.querySelector('.yhm')
    var nl=document.querySelector('.nl')
    var tbody=document.querySelector('tbody')
    var son=document.querySelector('.son')
    //存储数据
    function cun(data){
        localStorage.setItem('data',JSON.stringify(data))
    }
    //获取存储数据
    function qu(){
        var obj= localStorage.getItem('data')
        if(obj!=null){
            return JSON.parse(obj)
        }else{
            return[]
        }
    }
    //存储数据到本地
    function add(){
        //先获取数据
        var shuju=qu();
        //操作数据(添加)
        shuju.push({
            uname:yhm.value,
            age:nl.value
        })
        //存储
        cun(shuju)
        yhm.value=''
        nl.value=''
        //渲染
        xr();
    }
    function xr(){
        tbody.innerHTML='';
        //先获取数据
        var shuju=qu();
        //for循环遍历
        for(i=0;i<shuju.length;i++){
            //创建
            var tr=document.createElement('tr')
            //赋值
            tr.innerHTML=`
                    <td>${shuju[i].uname}</td>
                    <td>${shuju[i].age}</td>
                    <td><button onclick="del(${i})">删除</button></td>`;
            //添加
            tbody.appendChild(tr)       
        }
    }
    function del(aaa){
        //先获取数据
        var shuju=qu()
        //操作数据(删除)
        shuju.splice(aaa,1)
        //存储
        cun(shuju)
        //渲染
        xr()
    }
    xr()
    function show(){
        son.style.display='block'
    }
    function close1(){
        son.style.display='none'
    }
</script>